<template>
  <div class="common-layout">
    <div class="header-warp">
      <div class="header-content">
        <span :class="discoveryIndex==1?'active':''" @click="LevelPage(1)">会员专区</span>
        <span :class="discoveryIndex==2?'active':''" @click="LevelPage(2)">视频课</span>
        <span :class="discoveryIndex==3?'active':''" @click="LevelPage(3)">直播课</span>
        <span :class="discoveryIndex==4?'active':''" @click="LevelPage(4)">线下课</span>
        <span :class="discoveryIndex==5?'active':''" @click="LevelPage(5)">主题</span>
      </div>
    </div>
    <Router-view></Router-view>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { onMounted, ref } from "vue";
// 判断选中样式
let discoveryIndex = ref(1)
// 点击跳转页面
const LevelPage = (idx:number)=>{
    discoveryIndex.value = idx
    if (idx == 2) {
        router.push('/discovery/videolesson')
    }else if(idx == 3){
        router.push('/discovery/live')
    }else if(idx == 1){
        router.push('/discovery')
    }else if(idx == 5){
        console.log(idx);
        
        router.push('/discovery/theme')
    }
}

</script>

<style lang="less" scoped>
.common-layout {
  background-color: rgb(245, 247, 249);
  width: 100%;
  .header-warp {
    margin-top: 6px;
    background-color: white;
    height: 80px;
    width: 100%;
    .header-content {
      width: 1200px;
      margin: 0 auto;
      text-align: center;
      line-height: 80px;
      color: #111;
      font-size: 16px;
      span {
        margin: 0 20px;
        padding: 18px 6px;
        &.active {
          border-bottom: 3px solid #111;
        }
      }
    }
  }
  
}
</style>
